<template>
  <div class="event-activities">
    <!-- Hero 区域 -->
    <section
      class="hero-section bg-[#E30314] text-white py-20 relative overflow-hidden">
      <div class="absolute inset-0 bg-black bg-opacity-10"></div>
      <div class="container mx-auto px-4 relative z-10">
        <div class="text-center">
          <h1 class="text-5xl md:text-6xl font-bold mb-4 animate-fade-in">
            {{ config.hero.title }}
          </h1>
          <h2
            class="text-2xl md:text-3xl font-light mb-6 animate-fade-in-delay">
            {{ config.hero.subtitle }}
          </h2>
          <p
            class="text-xl max-w-4xl mx-auto leading-relaxed animate-fade-in-delay-2">
            {{ config.hero.description }}
          </p>
        </div>
      </div>
    </section>

    <!-- 主要赛事活动 -->
    <section class="main-events py-16 bg-gray-50">
      <div class="container mx-auto px-4">
        <h2 class="text-4xl font-bold text-center mb-12 text-gray-800">
          主要赛事活动
        </h2>
        <div class="grid grid-cols-1 lg:grid-cols-2 gap-8">
          <div
            v-for="(event, index) in config.mainEvents"
            :key="event.id"
            class="bg-white rounded-xl shadow-lg overflow-hidden hover:shadow-2xl transition-all duration-500 transform hover:-translate-y-2"
            :style="{ animationDelay: index * 0.1 + 's' }">
            <div class="relative h-48 bg-[#E30314]">
              <div class="absolute inset-0 bg-black bg-opacity-10"></div>
              <div class="absolute inset-0 flex items-center justify-center">
                <div class="text-center text-white">
                  <h3 class="text-2xl font-bold mb-2">{{ event.title }}</h3>
                  <p class="text-lg opacity-90">{{ event.englishTitle }}</p>
                </div>
              </div>
            </div>
            <div class="p-8">
              <p class="text-gray-600 mb-6 leading-relaxed text-lg">
                {{ event.description }}
              </p>
              <div class="space-y-3">
                <div
                  v-for="feature in event.features"
                  :key="feature"
                  class="flex items-center text-sm text-gray-700">
                  <div
                    class="w-3 h-3 bg-[#E30314] rounded-full mr-4 flex-shrink-0"></div>
                  <span>{{ feature }}</span>
                </div>
              </div>
              <div class="mt-8">
                <span
                  class="inline-block bg-green-100 text-green-800 px-4 py-2 rounded-full text-sm font-medium">
                  {{ event.status === "active" ? "进行中" : "已结束" }}
                </span>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>

    <!-- 最新活动 -->
    <section class="latest-events py-16 bg-white">
      <div class="container mx-auto px-4">
        <h2 class="text-4xl font-bold text-center mb-12 text-gray-800">
          最新活动
        </h2>
        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
          <div
            v-for="(event, index) in config.latestEvents"
            :key="event.id"
            class="bg-white rounded-lg shadow-md p-6 hover:shadow-xl transition-all duration-300 transform hover:-translate-y-1 border border-gray-100"
            :style="{ animationDelay: index * 0.1 + 's' }">
            <div class="flex items-center justify-between mb-4">
              <span class="text-xs text-gray-500">{{
                formatDate(event.date)
              }}</span>
              <span
                class="inline-block bg-blue-100 text-blue-800 px-3 py-1 rounded-full text-xs font-medium">
                {{ event.type }}
              </span>
            </div>
            <h3 class="text-lg font-semibold text-gray-800 mb-3 line-clamp-3">
              {{ event.title }}
            </h3>
            <p
              v-if="event.description"
              class="text-sm text-gray-600 line-clamp-2 mb-4">
              {{ event.description }}
            </p>
            <div class="flex items-center justify-between">
              <span
                class="inline-block bg-green-100 text-green-800 px-3 py-1 rounded-full text-xs font-medium">
                {{ event.status === "active" ? "进行中" : "已结束" }}
              </span>
              <button
                @click="handleViewDetails(event)"
                class="text-blue-600 hover:text-blue-800 text-sm font-medium transition-colors">
                查看详情 →
              </button>
            </div>
          </div>
        </div>
      </div>
    </section>

    <!-- 视频内容 -->
    <section class="videos-section py-16 bg-gray-50">
      <div class="container mx-auto px-4">
        <h2 class="text-4xl font-bold text-center mb-12 text-gray-800">
          精彩视频
        </h2>
        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
          <div
            v-for="(video, index) in config.videos"
            :key="video.id"
            class="bg-white rounded-xl shadow-lg overflow-hidden hover:shadow-2xl transition-all duration-500 transform hover:-translate-y-2"
            :style="{ animationDelay: index * 0.1 + 's' }">
            <div class="relative">
              <div
                class="h-48 bg-gradient-to-br from-gray-300 to-gray-400 flex items-center justify-center relative overflow-hidden">
                <div class="absolute inset-0 bg-black bg-opacity-20"></div>
                <div class="text-center text-gray-600 relative z-10">
                  <div
                    class="w-16 h-16 bg-white rounded-full flex items-center justify-center mx-auto mb-3 shadow-lg">
                    <svg
                      class="w-8 h-8 text-blue-600"
                      fill="currentColor"
                      viewBox="0 0 20 20">
                      <path d="M8 5v10l8-5-8-5z" />
                    </svg>
                  </div>
                  <p class="text-sm font-medium">视频预览</p>
                </div>
              </div>
              <div
                class="absolute top-3 right-3 bg-black bg-opacity-75 text-white px-3 py-1 rounded-full text-xs font-medium">
                {{ video.duration }}
              </div>
            </div>
            <div class="p-6">
              <h3 class="text-lg font-semibold text-gray-800 mb-3">
                {{ video.title }}
              </h3>
              <p class="text-sm text-gray-600 mb-4">{{ video.description }}</p>
              <div class="flex items-center justify-between">
                <span class="text-xs text-gray-500">
                  {{ video.views }} 次观看
                </span>
                <button
                  @click="handleVideoPlay(video)"
                  class="bg-[#E30314] text-white px-4 py-2 rounded-lg hover:bg-[#E30314] transition-colors font-medium">
                  观看视频
                </button>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>

    <!-- 统计数据 -->
    <section class="statistics-section py-16 bg-white">
      <div class="container mx-auto px-4">
        <h2 class="text-4xl font-bold text-center mb-12 text-gray-800">
          赛事数据
        </h2>
        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8">
          <div
            v-for="(stat, index) in config.statistics"
            :key="stat.label"
            class="text-center p-6 rounded-lg hover:bg-gray-50 transition-colors duration-300"
            :style="{ animationDelay: index * 0.1 + 's' }">
            <div class="text-5xl font-bold text-[#E30314] mb-3">
              {{ stat.number }}
            </div>
            <div class="text-lg font-semibold text-gray-800 mb-2">
              {{ stat.label }}
            </div>
            <p class="text-sm text-gray-600">{{ stat.description }}</p>
          </div>
        </div>
      </div>
    </section>

    <!-- 联系方式 -->
    <section
      class="contact-section py-16 bg-gradient-to-r from-blue-600 to-purple-700 text-white relative overflow-hidden">
      <div class="absolute inset-0 bg-black bg-opacity-20"></div>
      <div class="container mx-auto px-4 relative z-10">
        <div class="text-center">
          <h2 class="text-3xl font-bold mb-6">{{ config.contact.title }}</h2>
          <p class="text-xl mb-12 max-w-2xl mx-auto">
            {{ config.contact.description }}
          </p>
          <div class="grid grid-cols-1 md:grid-cols-3 gap-8 max-w-6xl mx-auto">
            <div
              class="text-center p-6 rounded-lg bg-white bg-opacity-10 backdrop-blur-sm">
              <div
                class="w-16 h-16 bg-white bg-opacity-20 rounded-full flex items-center justify-center mx-auto mb-4">
                <svg class="w-8 h-8" fill="currentColor" viewBox="0 0 20 20">
                  <path
                    d="M2 3a1 1 0 011-1h2.153a1 1 0 01.986.836l.74 4.435a1 1 0 01-.54 1.06l-1.548.773a11.037 11.037 0 006.105 6.105l.774-1.548a1 1 0 011.059-.54l4.435.74a1 1 0 01.836.986V17a1 1 0 01-1 1h-2C7.82 18 2 12.18 2 5V3z" />
                </svg>
              </div>
              <h3 class="font-semibold mb-2 text-lg">电话咨询</h3>
              <p class="text-xl font-medium">{{ config.contact.phone }}</p>
            </div>
            <div
              class="text-center p-6 rounded-lg bg-white bg-opacity-10 backdrop-blur-sm">
              <div
                class="w-16 h-16 bg-white bg-opacity-20 rounded-full flex items-center justify-center mx-auto mb-4">
                <svg class="w-8 h-8" fill="currentColor" viewBox="0 0 20 20">
                  <path
                    d="M2.003 5.884L10 9.882l7.997-3.998A2 2 0 0016 4H4a2 2 0 00-1.997 1.884z" />
                  <path
                    d="M18 8.118l-8 4-8-4V14a2 2 0 002 2h12a2 2 0 002-2V8.118z" />
                </svg>
              </div>
              <h3 class="font-semibold mb-2 text-lg">邮箱咨询</h3>
              <p class="text-xl font-medium">{{ config.contact.email }}</p>
            </div>
            <div
              class="text-center p-6 rounded-lg bg-white bg-opacity-10 backdrop-blur-sm">
              <div
                class="w-16 h-16 bg-white bg-opacity-20 rounded-full flex items-center justify-center mx-auto mb-4">
                <svg class="w-8 h-8" fill="currentColor" viewBox="0 0 20 20">
                  <path
                    fill-rule="evenodd"
                    d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-6-3a2 2 0 11-4 0 2 2 0 014 0zm-2 4a5 5 0 00-4.546 2.916A5.986 5.986 0 0010 16a5.986 5.986 0 004.546-2.084A5 5 0 0010 11z"
                    clip-rule="evenodd" />
                </svg>
              </div>
              <h3 class="font-semibold mb-2 text-lg">微信咨询</h3>
              <p class="text-xl font-medium">{{ config.contact.wechat }}</p>
            </div>
          </div>
        </div>
      </div>
    </section>
  </div>
  <VideoPlayModal
    :video-url="videoUrl"
    :video-title="videoTitle"
    :visible="videoModalVisible"
    @close="videoModalVisible = false"></VideoPlayModal>
</template>

<script setup>
import { ref } from "vue";
import { eventActivitiesConfig } from "../config/eventActivities.js";
import VideoPlayModal from "../components/videoPlayModal.vue";

const config = eventActivitiesConfig;
const videoModalVisible = ref(false)
const videoTitle = ref('')
const videoUrl = ref('')
// 格式化日期
const formatDate = (dateString) => {
  const date = new Date(dateString);
  return date.toLocaleDateString("zh-CN", {
    year: "numeric",
    month: "2-digit",
    day: "2-digit",
  });
};

// 处理视频播放
const handleVideoPlay = (video) => {
  console.log("播放视频:", video.title);
  // 这里可以添加视频播放逻辑，比如打开模态框或跳转到视频页面
  // videoUrl.value = video.url;
  // videoTitle.value = video.title;
  videoModalVisible.value = true;
};

// 处理查看详情
const handleViewDetails = (event) => {
  console.log("查看详情:", event.title);
  // 这里可以添加跳转到详情页面的逻辑
  alert(`查看详情: ${event.title}`);
};
</script>

<style scoped>
.line-clamp-2 {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.line-clamp-3 {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.event-activities {
  min-height: 100vh;
}

/* 动画效果 */
.animate-fade-in {
  animation: fadeIn 0.8s ease-out;
}

.animate-fade-in-delay {
  animation: fadeIn 0.8s ease-out 0.2s both;
}

.animate-fade-in-delay-2 {
  animation: fadeIn 0.8s ease-out 0.4s both;
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* 响应式设计 */
@media (max-width: 768px) {
  .hero-section h1 {
    font-size: 2.5rem;
  }

  .hero-section h2 {
    font-size: 1.5rem;
  }

  .hero-section p {
    font-size: 1rem;
  }
}

/* 悬停效果 */
.hover\:shadow-2xl:hover {
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
}

/* 渐变背景 */
.bg-gradient-to-br {
  background-image: linear-gradient(to bottom right, var(--tw-gradient-stops));
}

/* 毛玻璃效果 */
.backdrop-blur-sm {
  backdrop-filter: blur(4px);
}
</style>
